<template>
	<div class="goods">
		<!-- 左侧商品种类: -->
		<div class="menu-wrapper" ref='menuScroll'>
			<ul>
				<li v-for="(item,index) in goods" class="menu-item border-1px" :class="{'current':currentIndex===index}" @click="selectMenu(index)">
					<span class="text">
						<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>
						{{item.name}}
					</span>
				</li>
			</ul>
		</div>
		<!-- 右侧商品详情列表： -->
		<div class="foods-wrapper" ref="foodScroll">
			<ul>
				<li v-for="item in goods" class="food-list food-list-hook">
					<h1 class="title">{{item.name}}</h1>
					<ul>
						<li v-for="food in item.foods" class="food-item">
							<div class="icon">
								<img :src="food.icon" alt="" width="57" height="57">
							</div>
							<div class="content">
								<h2 class="name">
									{{food.name}}
								</h2>
								<p class="desc">
									{{food.description}}
								</p>
								<div class="extra">
									<span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
								</div>
								<div class="price">
									<span class="now">￥{{food.price}}</span>
									<span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
								</div>
								<div class="cartcontrol-wrapper">
									<cartcontrol :food="food" v-on:cart-add="cartAdd"></cartcontrol>
								</div>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- 购物车组件：传入配送费和起送费 -->
		<shopcart ref="shopcart" :selectFood="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>
	</div>

</template>

<script>
import BScroll from 'better-scroll';
import shopcart from '../../components/shopcart/shopcart';
import cartcontrol from '../../components/cartcontrol/cartcontrol'
const ERR_OK=0;
export default {
  name: 'goods',
  props:{
  	seller:{
  		type:Object
  	}
  },
  data(){
  	return {
  		scrollY:0,
  		foodScroll:null,
  		goods:[],
  		listHeight:[],
  	}
  },
  mounted(){
  	this.classMap=['decrease','discount','special','invoice','guarantee'];
  	this.$http.get('/api/goods').then(function(res){
  		res=res.body;
        if(res.errno===ERR_OK){
           this.goods=res.data;
           // 正确计算已经渲染DOM的menu高度：（在操控和DOM相关的接口中使用这个方法是比较安全的）
           this.$nextTick(function(){
           	  // 在这里调用左侧右两侧上下滚动的方法：
           	this._MenuScroll();
           	this._foodScroll();
           	this.getHeight();
           })
        }  
  	});

  },
  computed:{
  	// 获取左侧的索引：
  	currentIndex(){
  		for(let i=0;i<this.listHeight.length;i++){
  			let height1=this.listHeight[i];
  			let height2=this.listHeight[i+1];
  			// 当在这个区间的时候：
  			if(!height2 || (this.scrollY>=height1 && this.scrollY<height2)){
  				// 返回当前索引：
  				return i
  			}
  		}
  		return 0
  	},
  	selectFoods(){
  		let foods=[];
  		this.goods.forEach(function(good){
  			good.foods.forEach(function(food){
  				if(food.count>0){
  					foods.push(food);
  				}
  			})
  		});
  		return foods;
  	}
  },
  methods:{
  	_MenuScroll(){
  		let scrollDOM=this.$refs.menuScroll;
  		let menuScroll = new BScroll(scrollDOM,{
    		scrollY: true,
    		click: true
		});
  	},
  	_foodScroll(){
  		var scrollDOM=this.$refs.foodScroll;
  		this.foodScroll = new BScroll(scrollDOM,{
  			// 派发当前滚动到的位置:
    		probeType:3,
    		click:true
		});  
		var that=this;
		// 监听这个对象的scoll事件：
		this.foodScroll.on('scroll',function(pos){
			// 通过之前定义的scollY去接收这个变量，并转换成正值：
			that.scrollY=Math.abs(Math.round(pos.y));
			
		})		
  	},
  	getHeight(){
  		let foodList=this.$refs.foodScroll;
  		let foodListChild=foodList.getElementsByClassName('food-list-hook');
  		// 定义临时变量:
  		let height=0;
  		this.listHeight.push(height);
  		for(let i=0;i<foodListChild.length;i++){
  			let item=foodListChild[i];
  			// 拿到每一个商品列表的高度，然后去累加：
  			height+=item.clientHeight;
  			this.listHeight.push(height);
  		}
  		
  	},
  	selectMenu(index){
  		let foodList=this.$refs.foodScroll;
  		let foodListChild=foodList.getElementsByClassName('food-list-hook');
  		let el=foodListChild[index];
  		
  		this.foodScroll.scrollToElement(el,300)
  	},
  	cartAdd(target){
  		this.$nextTick(()=>{
  			this.$refs.shopcart.drop(target)
  		})
  	}
  },
   components:{
    	shopcart,
    	cartcontrol
  }
}
</script>

<style lang="less" scoped>
@import "../../common/less/index.less";
.goods{
	display: flex;
	position: absolute;
	width:100%;
	top:176px;
	bottom:46px;
	overflow: hidden;
}
.menu-wrapper{
	flex:0 0 80px;
	width:80px;
	background: #f3f5f7;
	.menu-item{
		display:table;
		height:54px;
		width:56px;
		line-height:14px;
		font-size: 14px;
		padding: 0 12px;
		&.current{
			background-color: #ffffff;
			font-weight:700;
			position: relative;
			margin-top: -1px;
			z-index: 10;
			.text{
				.border-none();
			}
		}
         .icon{
            display:inline-block;
            width:12px;
            height:12px;
            margin-right: 2px;
            background-size: 12px 12px;
            background-repeat: no-repeat;
            vertical-align:top;
            &.decrease{
              .bg-image('decrease_1')
            }
            &.discount{
              .bg-image('discount_1')
            }
            &.special{
              .bg-image('special_1')
            }             
            &.guarantee{
              .bg-image('guarantee_1')
            }
            &.invoice{
              .bg-image('invoice_1')
            }                                    
          }
          .text{
          	font-size: 12px;
          	display:table-cell;
          	width:56px;
          	vertical-align:middle;
          	color:#07111b;
          	.border-1px(rgba(7,17,27,0.1))
          }
	}
}
.foods-wrapper{
	flex:1;
	background-color: #fff;
	.food-list{
		h1{
			font-size: 12px;
			color:#93999f;
			border-left:2px solid #d9dde1;
			height:26px;
			line-height:26px;
			padding-left: 12px;
			background-color: #f3f5f7;
		}
		.food-item{
			display: flex;
			margin: 18px; 
			overflow:hidden;
			.border-1px(rgba(7,17,27,0.1));
			padding-bottom:18px;
			&:last-child{
				.border-none();
				margin-bottom:0;
			}
			.icon{
				flex:0 0 57px;
				img{
					width:100%;
				}
			}
			.content{
				margin-left:10px;
				flex:1;
				.name{
					font-size: 14px;
					color:#07111b;
					margin:2px 0 8px 0;
					line-height:14px;
				}
				.desc{
					font-size: 10px;
					line-height:12px;
					color:#93999f;
					margin-bottom:8px;
				}
				.extra{
					font-size: 10px;
					line-height:10px;
					color:#93999f;
					.count{
						margin-right:12px;
					}
				}
				.price{
					font-size: 14px;
					font-weight:700;
					line-height:24px;
					.now{
						color:#f01414;
						margin-right:8px;
						font-size: 14px;
						font-weight:700;
					}
					.old{
						text-decoration: line-through;
						font-size: 10px;
						color:#93999f;
						font-weight:700;
					}
				}
				.cartcontrol-wrapper{
					position: absolute;
					right:0;
					bottom:12px;
				}
			}
		}
	}
}



</style>